<template>
  <div></div>
  <btn text="呜呜呜" @on-click="(msg: string) => console.log(msg)" />
  <hr>
  <btn2>
    哥哥哥
  </btn2>
  <hr>
  <btn3 @on-click="add">
    + {{count}}
  </btn3>
</template>

<script setup lang='ts'>
import { $ref } from 'vue/macros'   // 新特性
import { ref, reactive, h, createVNode, render } from 'vue'

// 使用createVNode创建组件
const box = createVNode('div', { class: 'box' }, '通过createVNode创建')
render(box, document.body)

// 使用h函数创建组件
type Props = {
  text: string
}
const btn = (props: Props, ctx: any) => {
  return h('div', {   // 创建指定元素
    class: ['box'],   // 指定class
    onClick: () => {  // 注册点击事件
      ctx.emit('on-click', '孙小双')  // 传给父组件事件     
    }
  }, props.text)      // 定义内容
}

// 使用h函数创建组件2
const btn2 = (props: Props, ctx: any) => {
  return h('div', {
    class: ['box'],
  }, ctx.slots.default())   // 定义默认插槽
}

// 新特性
let count = $ref(0)
const btn3 = (props: Props, ctx: any) => {
  return h('div', {
    class: 'box',
    onClick: () => ctx.emit('on-click')
  }, ctx.slots.default())
}
const add = () => count++     // 新特性无需使用.value


</script>

<style lang='scss' scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>